<template>
  <div class="warp Fields_edit">
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        label="序号"
        type="index"
        min-width="5%"
        class-name="allowDrag"
      />
      <el-table-column
        label="字段列名"
        prop="columnName"
        min-width="10%"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="字段描述" min-width="10%">
        <template slot-scope="scope">
          <el-input v-model="scope.row.columnComment"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="插入" min-width="5%">
        <template slot-scope="scope">
          <el-checkbox
            true-label="1"
            v-model="scope.row.isInsert"
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="编辑" min-width="5%">
        <template slot-scope="scope">
          <el-checkbox true-label="1" v-model="scope.row.isEdit"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="列表" min-width="5%">
        <template slot-scope="scope">
          <el-checkbox true-label="1" v-model="scope.row.isList"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="查询" min-width="5%">
        <template slot-scope="scope">
          <el-checkbox true-label="1" v-model="scope.row.isQuery"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="查看" min-width="5%">
        <template slot-scope="scope">
          <el-checkbox
            true-label="1"
            v-model="scope.row.isDetails"
          ></el-checkbox>
        </template>
      </el-table-column>

      <el-table-column label="必填" min-width="5%">
        <template slot-scope="scope">
          <el-checkbox
            true-label="1"
            v-model="scope.row.isRequired"
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="显示类型" min-width="12%">
        <template slot-scope="scope">
          <el-select v-model="scope.row.htmlType">
            <el-option label="文本框" value="input" />
            <el-option label="文本域" value="textarea" />
            <el-option label="下拉框" value="select" />
            <el-option label="单选框" value="radio" />
            <el-option label="复选框" value="checkbox" />
            <el-option label="日期控件" value="datetime" />
            <el-option label="上传控件" value="uploadImage" />
            <el-option label="富文本控件" value="editor" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="字典类型" min-width="12%">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.dictType"
            clearable
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="dict in dictOptions"
              :key="dict.dictType"
              :label="dict.dictName"
              :value="dict.dictType"
            >
              <span style="float: left">{{ dict.dictName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                dict.dictType
              }}</span>
            </el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="close">返回</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          columnName: "sy", // 字段列名
          columnComment: "字段描述", // 字段描述
          isInsert: true, // 插入
          isEdit: true, // 编辑
          isList: true, // 列表
          isQuery: true, // 查询
          isDetails: true, // 查看
          isRequired: true, //必填
          htmlType: "input", // 显示类型
          dictType: "", // 字典类型
        },
      ],
    };
  },
  methods: {
    // 编辑
    close() {
      this.$router.push({ name: "Fields" });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>